<template>
    <div class="projects_box">
        <div class="w centerauto" style="position: relative;width: 1250px;">
            
            <div class="list__banner">
                <router-link to=""><img src="../../assets/images/long_pic01.png" alt=""></router-link>
            </div>
            <div class="list__main clearfix">
                <!-- 左侧  个人信息、项目列表 -->
                <div class="main_l__left">
                    <!-- 个人信息 -->
                    <div class="panel main_l__left_panel">
                        <el-card :body-style="{ padding: '0px',height: '100%',position: 'relative' }" style="height: 100%;">
                            <div class="toplink">
                                <router-link to="" class="toplinkbox borderBD">
                                    <img v-if="userInfo.u_head_portrait" :src="userInfo.u_head_portrait" class="displayB centerauto borderRadius" alt="" style="margin: 10px auto 3px;width: 65px;height: 65px;">
                                    <img v-else src="../../assets/images/userPic.png" class="displayB centerauto borderRadius" alt="" style="margin: 10px auto 3px;width: 65px;height: 65px;">
                                    <h5 style="line-height: 21px;margin-bottom: 5px;font-size: 14px;">{{userInfo.u_nickname}}</h5>
                                </router-link>
                            </div>
                            <div>
                                <div class="item_main_box main_middle_box" style="padding: 10px 13px;font-size: 12px;">
                                    <p>{{userAll.about}}</p>
                                    <div style="position: relative;padding-left: 40px;" v-show="userskill">
                                        <label style="line-height: 19px;position: absolute;left: 0;top: 0;">擅长：</label>{{userskill}}
                                    </div>
                                    <div style="position: relative;padding-left: 40px;" v-show="usercase">
                                        <label style="line-height: 19px;position: absolute;left: 0;top: 0;">案例：</label>{{usercase}}
                                    </div>
                                    <div class="item_b_address text-center">
                                        <img src="../../assets/images/icon-location.png" style="vertical-align: middle;"/>{{userInfo.pName}}-{{userInfo.cName}}
                                    </div>
                                </div>
                                <div class="item_bottom_box flexbox spacebetween main_bottom_box" style="padding: 10px 13px;">
                                    <div class="item_b_address">
                                        <el-rate disabled v-model="userInfo.start"></el-rate>
                                    </div>
                                    <div style="font-size: 13px;">积分：{{userInfo.u_integral}}</div>
                                </div>
                                <router-link to="/dashboard">
                                    <el-button type="primary" style="width: 80%;margin: 0 auto 10px;display: block;">{{userInfo.u_user_type == 1 ? '开通会员':'续费会员'}}</el-button>
                                </router-link>
                            </div>
                        </el-card>
                    </div>
                    <!-- 近期竞标成功的项目 -->
                    <div class="panel" style="margin-top: 20px;">
                        <el-row v-for="(item,index) in myProject" :key="index">
                            <el-card shadow="always" body-style="padding: 5px 0px" class="cardS">
                                <el-col :span="21">
                                    <router-link :to="{path: '/workbench/case',query:{'pbid': item.pb_id,'pid': item.pb_pid}}" class="displayB text-center flexbox" style="padding: 0px 5px;">
                                        <el-row class="text-left">
                                            <el-col :span="24">
                                                <p class="star__bot_name">{{item.p_name}}</p>
                                                <div class="right__text">
                                                    {{item.p_cycle}}{{item.p_cycle_type | rep_cycle_type}}
                                                    <span class="right__text__icon">|</span>{{item.p_budget | re_p_budget}}
                                                </div>
                                                <div class="bot__item__skill">
                                                    <span>{{item.p_adopt_time}}</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </router-link>
                                </el-col>
                                <el-col :span="3">
                                    <img v-if="item.st_photo_just" :src="item.st_photo_just" width="25" height="25" alt="" class="fl borderRadius">
                                    <img v-else src="../../assets/images/userPic.png" width="25" height="25" alt="" class="fl borderRadius">
                                </el-col>
                            </el-card>
                        </el-row>
                    </div>
                </div>
                <!-- end -->
                <div class="main__left">
                    <div id="search-box" class="panel" style="margin-left: 0px;">
                        <el-input placeholder="输入关键字词, 开始检索您感兴趣的项目，例如：网站、微信" v-model="keywords" class="search-input">
                            <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
                        </el-input>
                    </div>
                    <div class="search__main">
                        <div class="search__item borderBD clearfix">
                            <div class="item__left">
                                <span class="search__title">金额范围：</span>
                            </div>
                            <div class="item__right">
                                <span class="option btn__item btn__item--money" :class="(item.st_id == moneyid) ? 'active':''" v-for="(item,index) in moneyScope" :key="index" @click="searchMoneyFun(item.st_id)">{{item.st_name}}</span>
                            </div>
                        </div>
                        <div class="search__item clearfix">
                            <span class="search__title sort_r16">排序：</span>
                            <span class="sort__btn" :class="(sortType == 0) ? 'sort__btn0':''" @click="sortFun(0)">默认</span>
                            <span class="sort__icon">|</span>
                            <span class="sort__btn" :class="sortMoneySty" @click="sortFun(1)">金额范围<i class="el-icon-back" v-show="sortType == 1"></i></span>
                        </div>
                    </div>
                    <div class="project-list">
                        <el-row :gutter="10">
                            <el-col :span="8" v-for="(item,index) in listData.data" :key="index" style="position: relative;">
                                <img src="../../assets/images/recommend.png" alt="" class="project-recommend__Image" style="top: 10px;" v-if="item.sc_is_top == 2" width="50" />
                                <el-card shadow="always" body-style="padding: 5px 0px" class="codeBox">
                                    <p class="code_tit multiplerowt">{{item.sc_title}}</p>
                                    <p class="code_det multiplerow" v-html="item.sc_content"></p>
                                    <div class="flexbox spacebetween code_info">
                                        <p class="sort__btn0">{{item.sc_money | re_p_budget}}</p>
                                        <router-link class="btn_line" :to="{path:'/codedetail', query:{id: item.sc_id}}">查看详情</router-link>
                                    </div>
                                    <div class="clearfix">
                                        <img v-if="item.u_head_portrait" :src="item.u_head_portrait" width="35" height="35" alt="" class="fl borderRadius" style="margin-right: 5px;">
                                        <img v-else src="../../assets/images/userPic.png" width="35" height="35" alt="" class="fl borderRadius" style="margin-right: 5px;">
                                        <div class="fl" style="max-width: 154px;">
                                            <p class="singlerow">{{item.u_type == 1? item.u_nickname:item.u_enterprise_name}}</p>
                                            <el-rate disabled v-model="item.start"></el-rate>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        <div class="pagination text-right" v-show="!listIsZero">
                            <el-pagination layout="prev, pager, next" :total="listData.total" @current-change="listPage"></el-pagination>
                        </div>
                    </div>

                    <!-- 暂无数据 -->
                    <div class="mt-large text-center" v-show="listIsZero">
                        <img src="../../assets/images/empty.jpg" height="200" alt="">
                        <p class="tip-small">暂无数据</p>
                    </div>
                </div>
                <div class="main__right">
                    <div class="publish panel">
                        <img src="../../assets/images/item_pic02.jpg" alt="" class="displayB" width="100%" />
                        <p class="r_explain">即刻，让专业的开发者开始为您服务</p>
                        <button @click="gopublish">免费发布源码</button>
                    </div>
                    <div class="panel service-star">
                        <div class="service-star__top clearfix">
                            <img src="../../assets/images/cxkfz_icon.jpg" alt="" height="24" class="displayB fl" />
                            <span class="fl" style="padding: 3px 0px 0px 5px;">诚信开发者</span>
                        </div>
                        <div class="service-star__bot">
                            <el-row>
                                <el-col :span="24" v-for="(item,index) in userListData" :key="index">
                                    <el-card shadow="always" body-style="padding: 5px 0px" class="cardS">
                                        <router-link :to="{path: '/homepage',query: {'id': item.u_id}}" class="displayB text-center flexbox" style="padding: 0px 5px;">
                                            <el-row class="text-left">
                                                <el-col :span="6">
                                                    <img v-if="item.u_head_portrait" :src="item.u_head_portrait" alt="" width="48" height="48" class="star__bot_pic" />
                                                    <img v-else src="../../assets/images/userPic.png" alt="" width="48" height="48" class="star__bot_pic" />
                                                    </el-col>
                                                <el-col :span="18">
                                                    <p class="star__bot_name">{{item.u_nickname}}</p>
                                                    <div class="right__text">
                                                        {{item.u_province}}
                                                        <span class="right__text__icon">|</span>{{item.u_type == 1?'个人':'企业'}}
                                                    </div>
                                                    <div class="bot__item__skill">
                                                        <span v-for="(sc,ind) in item.p_skills_name_arr" :key="ind">{{sc}}</span>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            
                                        </router-link>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="info panel">
                        <div class="info__wx">
                            <img :src="sysInfo.s_photo" alt="" width="80" height="80" class="displayB centerauto"/>
                        </div>
                        <div class="info__item flexbox spacebetween" v-for="(item,index) in infoData" :key="index">
                            <p>
                                <img :src="item.pic" alt="">
                                <span class="info__item__title">{{item.name}}</span>
                            </p>
                            <span class="info__item__text">{{item.tel}}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    
    import '../../assets/css/main.css'
    import '../../assets/css/projects.css'
    export default {
        data(){
            return{
                moneyScope: [
                    {"st_id": '',"st_name": "不限",},
                    {"st_id": '1',"st_name": "3000以下",},
                    {"st_id": '2',"st_name": "3000-5000",},
                    {"st_id": '3',"st_name": "5000-10000",},
                    {"st_id": '4',"st_name": "10000-50000",},
                    {"st_id": '5',"st_name": "50000-100000",},
                    {"st_id": '6',"st_name": "100000及以上",},
                ],
                moneyid: '',  //金额范围
                sc_money: '',  //项目金额
                sortType: 0,  //排序状态
                infoData: [
                    {'pic': require('../../assets/images/qq.png'),'name':'官方接包QQ群','tel': ''},
                    {'pic': require('../../assets/images/tel.png'),'name':'客服电话','tel': ''},
                    {'pic': require('../../assets/images/email.png'),'name':'官方邮箱','tel': ''},
                ],
                page: 1,  //页码
                keywords: '',  //关键字
                listData: {},
                listIsZero: false,  //列表是否展示
                userListData: [],  //优质开发商列表
                sysInfo: {},  //客服信息
                userAll: {},  //用户所有信息
                userInfo: {},  //用户个人信息
                userskill: '',  //用户擅长
                usercase: '',  //用户案例
                myProject: [],  //已完成的项目
            }
        },
        computed: {
            sortMoneySty: function(){

                var className = '';
                if((this.sortType == 1) && (this.sc_money == 1)){
                    className = 'sort__btn0 sort__btn1';
                }else if((this.sortType == 1) && (this.sc_money == 2)){
                    className = 'sort__btn0';
                }else{
                    className = ''
                }
                return className;
            },
        },
        filters: {
            //项目金额
            re_p_budget: function (value) {
                var val = 0;
                if (value == 1){
                    val = '3000以下';
                }else if (value == 2){
                    val = '3000-5000';
                }else if (value == 3){
                    val = '5000-10000';
                }else if (value == 4){
                    val = '10000-50000 ';
                }else if (value == 5){
                    val = '50000-100000';
                }else if (value == 6){
                    val = '100000 以上';
                }
                return val;
            },
            //项目周期单位
            rep_cycle_type: function(value){

                var val = '';
                if(value == 1){
                    val = '天';
                }else if(value == 2){
                    val = '周';
                }else if(value == 3){
                    val = '月';
                }
                return val;
            },
        },
        methods: {
            init(){

                var _this = this;
                //用户信息
                this.$httpGet('/api/index/Project/getUserInfoByUid',{
                    'u_id': window.localStorage.uid
                }).then(response => {

                    if(response.code == 200){
                        _this.userAll = response.msg;
                        _this.userInfo = response.msg.info;
                        _this.userskill = response.msg.skill.si_application_type;
                        let arr = [];
                        for(var i=0;i<response.msg.case.length;i++){
                            arr.push(response.msg.case[i].cp_name);
                        }
                        _this.usercase = arr.join(',');
                    }

                });
                //已完成的项目
                this.$httpGet('/api/index/index/nearBiddingProject',{
                    'u_id': window.localStorage.uid,
                }).then(response => {

                    if(response.code == 200){
                        _this.myProject = response.msg;
                    }else if(response.code == 300){
                        _this.myProject = [];
                    }

                });
                
            },
            list(){
                var _this = this;

                // 源码列表
                this.$httpGet('/api/index/Sourcecode/sourcecodeList',
                {
                    'page': _this.page,
                    'keywords': _this.keywords,
                    'sc_money': _this.moneyid,
                    'sc_money_order': _this.sc_money,
                }).then(response => {

                    if(response.code == 200){
                        
                        _this.listData = response.msg;
                        for(let i=0;i<_this.listData.data.length;i++){
                            _this.listData.data[i].sc_content = _this.escapeStringHTML(response.msg.data[i].sc_content);
                        }
                        
                        _this.listIsZero = false;
                        
                    }else if(response.code == 301){
                        _this.listData.data = [];
                        _this.listIsZero = true;
                    }

                });

            },
            //优质开发商
            userList(){

                var _this = this;
                // 应用类型
                this.$httpGet('/api/index/Index/highQualityUser').then(response => {
                    
                    if(response.code == 200){
                        _this.userListData = response.msg;
                        for(let i in _this.userListData){

                            _this.userListData[i].p_skills_name_arr = _this.userListData[i].p_skills_name.split(',');

                        }
                    }

                });

            },
            //客服信息
            getSystemInfo(){
                var _this = this;
                // 应用类型
                this.$httpGet('/api/index/System/getSystemInfo').then(response => {
                    
                    if(response.code == 200){
                        _this.sysInfo = response.msg;
                        _this.infoData[0].tel = response.msg.s_qq_group;
                        _this.infoData[1].tel = response.msg.s_phone;
                        _this.infoData[2].tel = response.msg.s_email;
                    }

                });
            },
            //金额范围
            searchMoneyFun(moneyid){
                this.moneyid = moneyid;
                this.list();
            },
            //排序
            sortFun(type){

                this.sortType = type;

                if(type == 0){  //默认
                    this.sc_money = '';
                }else if(type == 1){  //金额范围
                    
                    if(this.sc_money){
                        if(this.sc_money == 1){
                            this.sc_money = 2;
                        }else if(this.sc_money == 2){
                            this.sc_money = 1;
                        }
                    }else{
                        this.sc_money = 1;
                    }
                }
                this.list();
            },
            //搜索关键字
            searchBtn(){
                this.list();
            },
            //切换页码
            listPage(page){
                this.page = page;
                this.list();
            },
            //发布需求
            gopublish(){
                this.$router.push({
                    'path': '/codeedit'
                })
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.init();
            this.list();
            this.userList();
            this.getSystemInfo();
        },
    }
</script>
